<template >
	<div>
		<div class="search_bar">
			<a href="javascript:history.back(-1)">
				<span class="cancle">取消</span>
			</a>
				<div class="search_item">
					<img src="../../assets/liu/放大镜.png" class="find" />
					<span class="span_one">商品</span>
					<span class="span_two">店铺</span>
					<img src="../../assets/liu/倒三角形.png" />
					<input type="text" class="search_input" v-model='content' @keyup="search" placeholder="红酒抽奖赢1000元优惠券"/>
				</div>
			</div>
	<hr />
		<div class="list">
			<dl class="hot">
				热词推荐
			<dt class="list_item">
				<dd>红酒</dd>
				<dd>拉菲</dd>
				<dd>葡萄酒</dd>
				<dd>精品酒</dd>
				<dd>白兰地</dd>
				<dd>可乐</dd>
			</dt>
		</dl>
		<hr />
		</div>
		<!--跨域-->
		<div class="jsonp" >
			<h1>数据展示</h1>
			<ul v-for="(k,index) in arr">
				<li><em>{{index}}.</em>{{k}}</li>
			</ul>
		</div>
	</div>
	
	
</template>

<script>
	import jsonp from 'jsonp'

	export default {
		name: 'search',
		data() {
			return {
				content:'',
				arr:''
			}
		},
		computed:{
			str(){
				return this.$store.state.str
			}
		},
		methods: {
			search:function(){			
				var _this = this;
				window.sb = function(data){
				_this.arr = data.s;
			 }
				jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+ this.content+"&cb=sb", null, (err, data) => {
						  if (data) {
						    console.log(11+data);
						  } else {
//						    console.log(err);
						  }
						});
		},
		mounted(){
		var bol = true;
		$(".search_item span").click(function() {
			bol = !bol;
			if(bol == true) {
				$(".span_one").css("display", "none");
				$(".span_two").css("display", "block");
			} else {
				$(".span_one").css("display", "block");
				$(".span_two").css("display", "none");
			}
		});
		}
	}
	}
</script>


<style scoped>
	body,
	html,
	span,
	div,
	input,
	h1,hr ,dl,dt,dd{
		margin: 0;
		padding: 0;
	}
	body{
		width: 100%;
		overflow-y: auto;
	}
	img{
		vertical-align: top;
	}
	.search_bar {
		width: 95%;
		margin: 0.5rem auto;
		position: relative;
	}
	
	.cancle {
		position: absolute;
		left: 0.3rem;
		top: 0.5rem;
		font-size: 1rem;
		opacity: 0.8;
		color: dimgray;
	}
	
	.search_item img {
		width: 1rem;
	}
	
	.search_item {
		width: 88%;
		height: 2.5rem;
		margin-left: 3rem;
		position: relative;
		background: rgb(244,244,244);
		border-radius: 2rem;
	}
	.search_item span {
		color: #FF0000;
	}
	
	.search_item span {
		position: absolute;
		left: 1rem;
		top: 0.5rem;
	}
	
	.search_item .span_two {
		display: none;
	}
	
	.search_item img {
		position: absolute;
		left: 3.3rem;
		top: 0.8rem;
	}
	
	.search_input {
		width: 20rem;
		height: 100%;
		border: none;
		outline: none;
		background: rgb(244,244,244);
		position: absolute;
		left: 5.5rem;
	}
	
	.search_item .find {
		width: 1.8rem;
		height: 1.8rem;
		position: absolute;
		left: 88%;
		top: 0.4rem;
	}
	hr{
		opacity: 0.4;
	}
	.list{
		height: 10rem;
	}
	.hot{
		margin-left: 5%;
		margin-top: 5%;
		background: url(../../assets/liu/热门.png) no-repeat;
		background-size: 16px 16px;
		padding-left: 1.6rem;
		font-size: 0.8rem;
		color: red;
	}
	.list_item{
		
	}
	.list dd{
		width:3.5rem;
		line-height: 2rem;
		text-align: center;
		border: 1px solid darkgray;
		border-radius: 2rem;
		background: beige;
	}
	.list dt{
		width: 12rem;
		height: 6rem;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		align-content:space-around ;
		padding-top: 2rem;
	}
	.jsonp{
		width: 60%;
		margin: 2rem auto;
		font-size: 1.5rem;
		color: blueviolet;
	}
	.jsonp em{
		margin-right: 2rem;
	}
	.jsonp li{
		border: 1px solid;
	}
</style>